<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="信息服务费"
      left-arrow
      @click-left="back"
    />
    <div class="card">
      <van-radio-group v-model="radio">
        <div class="words">
          信息服务费<van-icon
            size="16px"
            @click="show = true"
            color="#666"
            name="warning-o"
          />
        </div>
        <div style="margin-bottom: 15px" class="member">
          <div class="tiptitle">10次打包价格</div>
          <div class="newpri">
            ￥<span>{{ list3.total }}</span>
          </div>
          <div class="oldpri">原价{{ list3.originalPrice }}元</div>
          <van-radio checked-color="#45b7cb" name="1" />
        </div>
        <div style="margin-bottom: 15px" class="member">
          <div class="tiptitle">5次打包价格</div>
          <div class="newpri">
            ￥<span>{{ list2.total }}</span>
          </div>
          <div class="oldpri">原价{{ list2.originalPrice }}元</div>
          <van-radio checked-color="#45b7cb" name="2" />
        </div>
        <div class="member">
          <div class="tiptitle">单次信息服务</div>
          <div class="newpri">
            ￥<span>{{ list1.total }}</span>
          </div>
          <div class="oldpri">原价{{ list1.originalPrice }}元</div>
          <van-radio checked-color="#45b7cb" name="3" />
        </div>
      </van-radio-group>
      <div class="showwords">
        <div>*如您被房东投诉为中介，将被平台作拉黑处理</div>
        <div>*每次服务可与一位房东发起多次联系或在线磋商</div>
        <div>*该优惠截止2022年5月28日</div>
      </div>
    </div>
    <div class="cut"></div>
    <div class="btnpart">
      <div class="cheak">
        <van-checkbox
          shape="square"
          icon-size="14px"
          checked-color="#45b7cb"
          v-model="checked"
          style="margin-right: 5px"
        />
        <span
          >我已阅读并同意<span @click="torantagreement" class="xy"
            >《租客信息服务协议》</span
          ></span
        >
      </div>
      <div class="btn">
        <div class="pay">
          ￥<span>{{ price }}</span>
        </div>
        <div>
          <button @click="call">咨询客服</button>
          <button @click="topay">立即购买</button>
        </div>
      </div>
      <div class="safe"></div>
    </div>
    <van-popup v-model="show">
      <div @click="show = false" class="outinfo">
        <div class="infocontent">
          <div class="box1">申请退款</div>
          <div class="box2">以下情况可申请退款</div>
          <div class="box3">1、电话联系未接通或空号</div>
          <div class="box3">2、租客发起聊天，房东超过24小时未回复</div>
          <div class="box3">3、房源为虚假房源或中介房源</div>
          <div class="box3" style="margin-bottom: 15px">4、该房源已出租</div>
          <div class="box2">退款流程</div>
          <div class="box3">个人中心(投诉) —— 客服受理 —— 确认退款</div>
          <img src="../../assets/outmoney.png" alt="" />
        </div>
      </div>
    </van-popup>
    <van-overlay z-index="200" :show="showsuccess">
      <div class="wrapper">
        <div class="paysuccess">
          <van-icon size="70px" name="checked" />
          <div>
            交纳成功，<span>{{ time }}</span
            >秒后自动跳转
          </div>
          <button @click="back">跳转</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getPay, createPayorder, paySign } from "../../apis/buy.js";
import local from "../../utils/local.js";
export default {
  data() {
    return {
      radio: "1",
      checked: false,
      value1: 1,
      value2: 1,
      show: false,
      time: 3,
      showsuccess: false,
      wxChannel: null,
      list1: {},
      list2: {},
      list3: {},
      price: 0,
      serveId: "",
      timer: "",
    };
  },
  created() {
    if (window.plus) {
      setTimeout(this.plusReady, 0);
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
    getPay({ cate: "5" }).then((res) => {
      this.list1 = res.result.list[0];
      this.list2 = res.result.list[1];
      this.list3 = res.result.list[2];
    });
    if (local.get("lxradio")) {
      this.radio = local.get("lxradio");
    }
  },
  beforeDestroy() {
    local.set("lxradio", this.radio);
    clearInterval(this.timer);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    call() {
      window.location.href = "tel:400-000-7173";
    },
    torantagreement() {
      this.$router.push({ path: "/rantagreement" });
    },
    plusReady() {
      let _this = this;
      plus.payment.getChannels((channels) => {
        for (let i in channels) {
          if (channels[i].id == "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    },
    topay() {
      let _this = this;
      if (this.checked) {
        createPayorder({ serveId: this.serveId }).then((res) => {
          if (res.code == 201) {
            let orderid = res.result.orderId;
            paySign({ type: "1", orderId: orderid }).then((rep) => {
              console.log(rep);
              if (rep.code == 201) {
                plus.payment.request(
                  _this.wxChannel,
                  JSON.stringify(rep.result),
                  function (result) {
                    console.log(result);
                    _this.showsuccess = true;
                    _this.timer = setInterval(() => {
                      _this.time--;
                      if (_this.time == 0) {
                        _this.$router.go(-1);
                        clearInterval(_this.timer);
                      }
                    }, 1000);
                  },
                  function () {
                    _this.$toast("支付失败");
                  }
                );
              } else {
                _this.$toast("下单失败");
              }
            });
          } else {
            _this.$toast("下单失败");
          }
        });
      } else {
        this.$toast("请阅读并勾选下方协议");
      }
    },
  },
  beforeUpdate() {
    if (this.radio == 1) {
      this.price = this.list3.total;
      this.serveId = this.list3.serveId;
    } else if (this.radio == 2) {
      this.price = this.list2.total;
      this.serveId = this.list2.serveId;
    } else if (this.radio == 3) {
      this.price = this.list1.total;
      this.serveId = this.list1.serveId;
    }
  },
};
</script>

<style lang="less" scoped>
.cut {
  height: 100px;
}
.card {
  margin: 0 15px;
  background-color: #f2fafb;
  padding: 15px 10px;
  .member {
    font-size: 12px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-radius: 10px;
    .tiptitle {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
      width: 100px;
    }
    .oldpri {
      text-decoration: line-through;
      font-size: 11px;
      display: inline-block;
      background-color: #f2f2f2;
      color: #999;
      padding: 1px 2px;
    }
    .newpri {
      text-align: center;
      font-size: 12px;
      color: #d43b33;
      width: 60px;
      span {
        font-size: 22px;
        font-weight: bold;
      }
    }
    .point {
      color: #d43b33;
      margin-right: 2px;
    }
    .can {
      color: #999;
    }
  }
  .words {
    margin-bottom: 10px;
    font-size: 17px;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .showwords {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    > div {
      line-height: 18px;
    }
  }
}
.van-popup {
  border-radius: 20px;
  overflow-y: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outinfo {
  width: 330px;
  height: 300px;
  border-radius: 20px;
  background-color: #f2fdff;
  box-shadow: 0px 0px 12px 9px #b7e5ed inset;
  box-sizing: border-box;
  padding: 0 30px;
  font-weight: bold;
  position: relative;
  .box1 {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: -15px 0 50px;
    position: relative;
    z-index: 10000;
  }
  .box2 {
    font-size: 15px;
    color: #45b7cb;
    margin-bottom: 10px;
  }
  .box3 {
    margin-bottom: 5px;
    font-size: 12px;
    color: #333;
  }
  img {
    width: 200px;
    height: 55px;
    position: absolute;
    top: -29px;
    left: 63px;
    z-index: 3000;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.paysuccess {
  padding: 25px 40px;
  background-color: #fff;
  text-align: center;
  color: #45b7cb;
  > div {
    margin-top: 10px;
    color: #333;
    span {
      color: #45b7cb;
    }
  }
  button {
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #45b7cb;
    padding: 3px 15px;
    border-radius: 15px;
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 5px 0 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;
    .xy {
      color: #45b7cb;
    }
  }
  .btn {
    padding: 5px 0;
    margin: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pay {
      color: #d43b33;
      font-size: 16px;
      span {
        font-weight: bold;
        font-size: 28px;
      }
    }
    button {
      border: none;
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      width: 115px;
      color: #fff;
      &:first-child {
        background-color: #fff;
        color: #999;
        border: 1px solid #999;
        margin-right: 10px;
      }
      &:last-child {
        background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      }
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
